<template>
  <div class="bg-cover w-full relative h-[493px] lg:h-[606px] flex items-center justify-center">
    <y-image
      placeholder
      alt="background image"
      class="lg:hidden absolute object-cover inset-0 w-full h-full"
      width="375"
      height="493"
      src="home-imgs/h5home_exclusive_pic@2x.png" />
    <y-image
      placeholder
      alt="title image"
      width="1920"
      height="606"
      class="hidden lg:block absolute inset-0 object-cover w-full h-full"
      src="home-imgs/pchome_exclusive_pic0@2x.png" />
    <div class="flex relative z-1 lg:flex-row-reverse lg:mx-auto lg:w-100 flex-col w-full overflow-hidden">
      <!-- title -->
      <div
        class="mx-auto lg:mt-0 mt-6 w-8/12 lg:flex flex-col justify-end lg:justify-start lg:items-end lg:shrink-0 lg:flex-1">
        <WImage
          class="w-[84px] hidden lg:block h-[106px] mb-4"
          :src="useAsset('pc-home/pchome_exclusive_pic1@2x.png')" />
        <!--        <h2 class="text-xl lg:text-4xl text-white font-black mb-1 text-center lg:text-right">-->
        <!--          {{ $mt('EXCLUSIVE OFFERS') }}-->
        <!--        </h2>-->
        <y-image
          class="mx-auto lg:mx-0"
          width="209"
          height="26"
          placeholder
          src="home-imgs/h5home_exclusive_pic2.png" />
        <p
          class="text-xs break-all text-white lg:text-xl lg:font-medium lg:leading-[1.5] text-center leading-4 lg:text-right">
          {{ $mt("Don't miss our limited-time offers! ") }}
        </p>
        <p
          class="text-xs break-all text-white lg:text-xl lg:font-medium lg:leading-[1.5] text-center leading-4 lg:text-right lg:mb-6">
          {{ $mt('Discover current deals today!') }}
        </p>
        <!-- pc view more -->
        <NuxtLink
          external
          :to="$localePath('/discount')"
          class="hidden lg:flex min-w-[160px] px-2 h-10 bg-[#EB414E] hover:bg-[#eb414eba] rounded-3xl text-white items-center justify-center">
          <span class="mr-2">{{ $mt('View more') }}</span>
          <WImage class="h-4 w-4 mt-1" :src="useAsset('pc-home/h5home_exclusive_right@2x(1).png')" />
        </NuxtLink>
      </div>
      <!-- goods -->
      <div class="grid grid-cols-3 lg:grid-cols-4 gap-y-5 lg:gap-y-6 gap-x-3.5 lg:gap-x-7 px-4 lg:px-0 mt-5 lg:mt-0">
        <NewDiscountItem
          :class="{ 'hidden lg:block': i > 5 }"
          v-for="(item, i) in specialDealList.slice(0, 8)"
          :discountGoodsInfo="item" />
      </div>
      <!-- view more -->
      <NuxtLink
        external
        :to="$localePath('/discount')"
        class="flex lg:hidden items-center mt-8 mb-52px mx-auto cursor-pointer">
        <p class="text-white mr-1 pb-1 border-b border-b-[#fff]">{{ $mt('View more') }}</p>
        <WImage class="h-4 w-4" :src="useAsset('pc-home/h5home_exclusive_right@2x(1).png')" />
      </NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import { useRequest } from '~/composables/useRequest'
import { useHomeStore } from '~/store/home'
import WImage from '../logic/WImage.vue'
import NewDiscountItem from '~/components/home/NewDiscountItem.vue'

const { requestGet, requestPost } = useRequest()
const homeStore = useHomeStore()
// 服务端渲染的数据
const { data: specialDealList } = await useAsyncData(async () => homeStore.initSpecialDealList(0), {
  default: () => [] as any,
})
</script>

<style scoped lang="scss">
.h5-bg {
  background: url(/assets/images/pc-home/h5home_exclusive_pic@2x.webp) no-repeat;
  background-position: left top;
  background-size: 375px, 493px;
  // background-attachment: fixed;
}
.pc-bg {
  background: url(/assets/images/pc-home/pchome_exclusive_pic0@2x.webp) no-repeat;
  background-position: left top;
  background-size: 375px, 493px;
}
</style>
